<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../../lib/html5shiv.js?rev=@@hash"></script>
    <script type="text/javascript" src="../../lib/respond.min.js?rev=@@hash"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="../../lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../ht-css/Project.css"/>
    <link rel="stylesheet" type="text/css" href="../../lib/Validform/5.3.2/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="../../lib/DD_belatedPNG_0.0.8a-min.js?rev=@@hash"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../ht-css/style-q.css"/>
    <title></title>
</head>
<body>
<form id="addPicForm">
    <div class="cl clearfix pl-20 pt-15">
        <label class="form-label f-l text-r" style="width:90px;"><span class="c-red pr-5">*</span>分类：</label>
        <div class="f-l">
        <div class="size-M radius mb-10">
            <div style="position:relative;z-index: 920;">
                <input type="text" autocomplete="off" class="input-text radius" name="class1" placeholder="请选择一级分类" oninput="goods_listCategory(1)" id="class1" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5、]{1,20}$/" errormsg="格式错误，请重新输入" nullmsg="请填写信息">
                <ul class="relation radius guanlian" id="classUl1">
                </ul>
            </div>
            <span class="Validform_checktip"></span>
        </div>
        <div class="size-M radius mb-10">
            <div style="position:relative;z-index: 910;">
                <input type="text" autocomplete="off" class="input-text radius"  name="class2"  placeholder="请选择二级分类" id="class2" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5、]{1,20}$/" errormsg="格式错误，请重新输入" nullmsg="请填写信息">
                <ul class="relation radius guanlian" id="classUl2">
                </ul>
            </div>
            <span class="Validform_checktip"></span>
        </div>
        <div class="size-M radius mb-10">
            <div style="position: relative;z-index: 900;">
                <input type="text" autocomplete="off" class="input-text radius"  name="class3" placeholder="请选择三级分类" id="class3" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5、]{1,20}$/" errormsg="格式错误，请重新输入" nullmsg="请填写信息">
                <ul class="relation radius guanlian" id="classUl3">
                </ul>
            </div>
            <span class="Validform_checktip"></span>
        </div>
        </div>
    </div>
    <div class="cl clearfix pl-20 pt-15">
        <label class="form-label f-l text-r" style="width:90px;"><span class="c-red pr-5">*</span>名称：</label>
        <div class="formControls f-l">
        	<input type="text" maxlength="50" class="input-text" value="" placeholder="" id="picName" name="" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5]{1,50}$/" errormsg="格式错误，请重新输入" nullmsg="请填写信息">
        </div>
        <span class="Validform_checktip"></span>
    </div>
    <!--<div class="cl clearfix pl-20 pt-15">
        <label class="form-label f-l text-r" style="width:90px;">图片：</label>
        <input type="file" id="fileUp">
        &lt;!&ndash;<div class="formControls f-l"><img title="" width="50" height="50" src="../../static/h-ui.admin/images/um.gif" class="mr-10"><a href=""><i class="Hui-iconfont f-22 mt-10"></i></a><a href="##" class="ml-20">删除</a></div>&ndash;&gt;
    </div>-->
    <div class="cl clearfix pl-20 pt-15">
        <label class="form-label f-l text-r" style="width:90px;">图片：</label>
        <div class="formControls f-l">
            <!--<img title="" width="50" height="50" src="" id="myImg" class="mr-10">-->
            <span id="imgBox"></span>
            <a onclick="addBtn()"><i class="Hui-iconfont f-22 mt-10"></i></a>
            <input id="fileUp" type="file" multiple="multiple" onchange="putDataToPage(event)" style="display: none;" datatype="*" errormsg="格式错误，请重新输入" nullmsg="请填写信息">
        </div>
        <span class="Validform_checktip"></span>
    </div>
    <div class="cl clearfix pl-30 pt-15" style="padding-left: 100px;">
        <a onclick="deleteSelect()">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a onclick="deleteAllSelect()">删除所有</a>
    </div>
    <div class="text-c pd-20">
        <button class="btn btn-primary radius" type="submit">&nbsp;&nbsp;确认&nbsp;&nbsp;</button>
        <button onclick="addCancel();" class="btn radius ml-20" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
    </div>
</form>
</body>
<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../lib/layer/2.4/layer.js?rev=@@hash"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script> <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/jquery.validate.js?rev=@@hash"></script>
<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/validate-methods.js?rev=@@hash"></script>
<script type="text/javascript" src="../../lib/jquery.validation/1.14.0/messages_zh.js?rev=@@hash"></script>
<script type="text/javascript" src="../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../lib/Validform/5.3.2/Validform_v5.3.2_min.js?rev=@@hash"></script>
<script src="../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../ht-js/Project.js?rev=@@hash"></script>
<script>
    function goods_listCategory(categoryLevel) {
        var categoryName = $("#class1").val();
        var user_data = {
            categoryLevel: categoryLevel,
            categoryName: $("#class1").val(),
        }
        var succCallBack = function (data, status, response) {
            console.log(data)
            if (data.errorCode == "0") {
                if (data.data == null) {
                    classStr = "<li>无数据</li>"
                    $("#classUl1").html(classStr);
                } else {
                    var classStr = "";
                    for (var i = 0; i < data.data.length; i++) {
                        classStr += "<li onclick='nextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                    }
                    $("#classUl1").html(classStr);
                }
            }
        }
        web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
    }

    //获取光标
    $("#class1").focus(function () {
        $("#classUl1").show();
        goods_listCategory(1, 1);
    });
    $(document).bind("click", function (e) {
//id为menu的是菜单，id为open的是打开菜单的按钮
        if ($(e.target).closest("#classUl1").length == 0 && $(e.target).closest("#class1").length == 0) {
//点击id为menu之外且id不是不是open，则触发
            $("#classUl1").hide()
        }
    });
    var oneCategoryId,twoCategoryId,threeCategoryId;
    // 2,3,4级的模糊查询
    function getNext_input(level, category_id) {
        if(level == 2){
            oneCategoryId = category_id;
        }else if(level == 3){
            twoCategoryId = category_id;
        }else if(level == 4){
            threeCategoryId = category_id;
        }
        if (level<4){
            $("#class" + level + "")[0].oninput = function () {
                console.log(111)
                goods_listCategory(level, level, category_id);
            }
//获取光标
            $("#class" + level + "").focus(function () {
                $("#classUl" + level + "").show();
                goods_listCategory(level, level, category_id);
            });
            $(document).bind("click", function (e) {
//id为menu的是菜单，id为open的是打开菜单的按钮
                if ($(e.target).closest("#classUl" + level + "").length == 0 && $(e.target).closest("#class" + level + "").length == 0) {
//点击id为menu之外且id不是不是open，则触发
                    $("#classUl" + level + "").hide()
                }
            });
        }

    }

    function nextClass(category_id, level, category_name) {
        // if(level == 1){
        //     // oneCategoryId
        //     console.log(level)
        // }
        $("#class" + level + "").val(category_name)
        var user_data = {
            parentCateId: category_id
        }
        var succCallBack = function (data, status, response) {
            console.log(data)
            if (data.errorCode == "0") {
                if (data.data == null) {
                    classStr = "<li>无数据</li>";
                } else {
                    var classStr = "";
                    for (var i = 0; i < data.data.length; i++) {
                        classStr += "<li onclick='nextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                    }
                }
                if(data.data[0] == undefined){
                    classValue = category_id;
                    var nextLevel = level+1;
                    $("#classUl" + nextLevel + "").html(classStr);
                    $("#classUl" + level + "").hide();
                }else {
                    var nextLevel = data.data[0].category_level;
                    $("#classUl" + nextLevel + "").html(classStr);
                    $("#classUl" + nextLevel + "").show();
                    $("#classUl" + level + "").hide()
                }
            }
        }
        getNext_input(level + 1, category_id);
        web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
    }
    function addBtn() {
        $("#fileUp").trigger('click');
    }
    var formData = new FormData();
    var num = 0;
    var fileList = new Array();
    function putDataToPage(e) {
        for (var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            if (!(/^image\/.*$/i.test(file.type))) {
                continue; //不是图片 就跳出这一次循环
            }
            fileList.push(file);
            //实例化FileReader API
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function(e) {
                $("#imgBox").append('<img id="images' + num + '" src="'+ e.target.result + '" style="width: 50px;height: 50px" class="mr-10">');
                num++;
            }
        }
    }
    function deleteSelect(){
        var count = $("#imgBox").children('img').length;
        $("#images" + (count - 1)).remove();
        fileList.splice(num, 1);
        num--;
    }
    function deleteAllSelect(){
        $("#imgBox").empty();
        num = 0;
        fileList.length = 0;
//        console.log(fileList);
    }
    $("#addPicForm").Validform({
        tiptype:2,
        tipSweep:true,
        callback:function(form){
        	console.log("提交")
			add_submit();
			return false;
        }
    });
    var btnCount = 0;
    var localStorageParameters = decodeURIComponent(web.readCookie("loginData"));
    var JsonObject =JSON.parse(localStorageParameters);
    
    function add_submit() {
        if(btnCount == 0){
            btnCount = 1;
            formData = new FormData();
            formData.append("uploadImgType", 0);//0是上传主图，1是上传详情图
            if (fileList.length == 1) {
                console.log("上传一张图片")
                formData.append('file', fileList[0]);
                formData.append("oneCategoryId", oneCategoryId);
                formData.append("twoCategoryId", twoCategoryId);
                formData.append("threeCategoryId", threeCategoryId);
                formData.append("creationBy", JsonObject.user.user_ID);
                formData.append("imgName", $("#picName").val());
            } else {
                console.log("上传多张图片")
                for(var i = 0; i < fileList.length; i++){
                    formData.append('file', fileList[i]);
                }
                formData.append("oneCategoryId", oneCategoryId);
                formData.append("twoCategoryId", twoCategoryId);
                formData.append("threeCategoryId", threeCategoryId);
                formData.append("creationBy", JsonObject.user.user_ID);
                formData.append("imgName", $("#picName").val());
            }
            $.ajax({
                url: root.goodsInter.goods_saveImages,
                cache: false,  //禁用缓存
                type: "POST",
                // 告诉jQuery不要去处理发送的数据
                processData : false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType : false,
                data: formData,
                success: function (data) {
                    if(data.errorCode == 0){
                        window.parent.img_list();
                        console.log(btnCount);
                        showmsg("添加图片成功！",6);
                    }else{
                    	//layer.msg(data.errorMessage, {icon: 5,time: 1000});
                        showmsg(data.errorMessage,5);
                        btnCount = 0;
                    }

                }
            });
        } else {
            showmsg("请勿重复添加！",5);
        }
    }
    // 提示信息
    function showmsg(msg,icon){
        layer.msg(msg, {
            icon:icon,
            time: 1000
        },function(){
            if(icon==6){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        });
    }


    function addCancel() {
    	layer.confirm('确认要取消吗？',function(index){
            layer.msg('已取消', {
                icon: 1,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
                parent.layer.closeAll();
            });
	    });
    }
</script>
</html>